一、HTML简介

HTML的全称为Hypertext Markup Language，中文意思是超文本标签语言，是一种用来制作超文本文档的简单标签语言，其主要应用就是对网页内容的排版。

二、HTML基本组成

所谓超文本是因为其可以加入图片、声音、动画、影视等非单一文本内容。一个简单的HTML文档如下所示：

1
2
3
4
5
6
7
8
<HTML>
    <HEAD>
      	<TITLE>第一个HTML文档：Hello</TITLE>    
    </HEAD>  
    <BODY>
      	第一个HTML文档    
    </BODY>
</HTML>

  • <HTML></HTML>

    <HTML>标签用来标识HTML文档的开始，而</HTML>标签用来标识HTML文档的结束。

  • <HEAD></HEAD>

    HTML文档开始后，首先遇到的就是该文档的开头部分，其用<HEAD>和</HEAD>标签来标识。在该标签中可以使用<title></title>以及<script></script>等标签，用来描述HTML的相关信息。

  • <BODY></BODY>

    HTML文档的开头部分结束后，就进入文档的主体部分，用<BODY>和</BODY>标签来标识，在此标签对之间可以使用<p><h1><br>等标签，用来描述浏览器中显示出来的内容，同时<BODY>标签还可以有以下属性：

    • Bgcolor：设置背景颜色
    • Text：设置文本的颜色
    • Link：设置链接的颜色
    • Vlink：设置已使用的链接的颜色
    • Alink：设置被单击的链接的颜色

  • <title></title>

    在使用<HEAD>和</HEAD>标签时使用，用来修改浏览器窗口标题栏上的文本信息。

三、HTML基本标签

  • <p></p>

    <p></p>用来创建一个段落，在此标签之间添加的文本，将按照段落的格式显示在浏览器中，另外，该标签还可以使用align属性来说明对齐方式，属性值可以是left、center和right。

    <p>标签标识段落的开始，</p>标识段落的结束，是可以省略的。

  • <br>

    <br>没有结束标签，用来创建一个回车换行，若将<br>放在<p></p>外边，将创建一个大的回车换行，若放在<p></p>里则创建一个小的回车换行。

  • <div></div>、<span></span>

    <div></div>用于文档分节，也用于格式化表，此标签对的用法和<p></p>非常类似。

    <span></span>标签用于在行内控制特定内容的显示，如果要为一行内容的某几个字设置特殊的格式，可以使用该标签将这几个字包围起来，然后设置格式。

  • <a></a>

    该标签主要用于实现页面的联系和转换，即当用户点击超级链接时就会进入链接中指定的文档或文件（图形、音频、视频）。其格式如下：

    1
    <a href=链接目标的位置>链接的名称</a>

    在上述定义中链接名称是指向链接目标的连接指针，可以是文字或图片，而链接的目标位置可以使用URL指定，如果连接目标的网页位于同一站点下，可以使用相对URL，如果链接目标的网页位于其他站点，需要使用绝对URL，单击链接的名称就会跳转到相应链接目标的网页。

  • <img>

    使用img标签可以在网页中加入图像，其具有以下一些属性：

    • src：指定图形文件的文件路径和文件名
    • alt：当鼠标移动到图像上时显示的文本，即在浏览器还没完全读入图像时，在图像位置上显示的备用文字
    • Height和width：决定图像的高度和宽度，以像素为单位
    • border：决定边框线的宽度，0表示无边框

    在使用src属性时，如果图片pic.gif放在HTML文档的同一个目录下，则可以将代码写成<img src="pic.gif">；如果图片放在当前HTML文档所在目录的一个子目录（子目录名为images），则代码写成<img src="images/pic.gif">；如果图片pic.gif挡在当前HTML文档所在目录的上一级目录（根目录下只有一个文件夹名为Web），则代码写成<img src="../Web/pic.gif">。

  • <table></table>

    用于创建表格，具有以下一些属性：

    • bgcolor：设置表格的背景色
    • border：设置边框的宽度，其默认值为0
    • bordercolor：设置边框颜色
    • bordercolorlight：设置边框亮部分的颜色
    • bordercolordark：设置边框暗部分的颜色
    • cellspacing：设置表格格子之间空间的大小
    • cellpadding：设置表格格子边框与其内部内容之间空间的大小
    • width：设置表格的宽度

  • <tr></tr><td></td><th></th>

    <tr></tr>标签用于设置表格的一行，具有以下的属性：

    • align：设置单元格中文字的水平方向的对齐方式
    • valign：设置单元格中文字的垂直方向的对齐方式

    <td></td>标签用于设置表格中除了标题行中单元格的文字格式：

    • clospan：可以设置跨多列的单元格
    • rowspan：可以设置跨多行的单元格

    <th></th>标签用于设置表格标题行中单元格的文字格式，通常默认的格式是黑体居中。

  • 框架标签

    框架的标签为Frame，它可以用来向浏览器窗口中装载多个HTML文件，即每个HTML文件占据一个框架，多个框架可以同时显示在一个浏览器窗口中，它们组成了一个最大的框架，即一个包含多个HTML文档的HTML文件，常用的方法是在一个框架中放置目录，然后将HTML文件显示在另一个框架中。

    见的比较少，就先不介绍了，等用到的时候再去学习。

  • 表单标签

    表单是用来输入信息的区域，它是使网页具有交互性能的关键，利用表单可以接收用户输入，以便向服务器传送，服务器端接收并处理这些信息，然后动态产生网页。

    • 文本框：分为单行文本框和多行文本框，密码框可以认为是一种特殊的文本框
      • 单行文本框：<input type=text name=控件名称 value=传出值>
      • 密码文本框：<input type=password name=控件名称 value=传出值>
      • 多行文本框：<textarea row=行数 cols=列数 name=控件名称></textarea>

    • 按钮

      按钮有三种类型，分别是提交按钮、重置按钮和普通按钮。

    • 提交按钮：<input type=submit name=控件名称 value=显示值>

    • 重置按钮：<input type=reset name=控件名称 value=显示值>

    • 普通按钮：<input type=button name=控件名称 value=显示值>

    • 单选按钮

      一组单选按钮只能有一个单选按钮被选中，同一组内的多个单选按钮必须使用一个名称。

      1
      <input type=radio name=控件名称 value=传出值>

    • 复选框

      可以有多项被选中，格式如下：

      <input type=checkbox name=控件名称 value=传出值>

    • 下拉菜单

      1
      2
      3
      4
      5
      <select name=控件名称 size=显示项数>
        	<option>选项1</option>
        	<option>选项2</option>
        	<option>选项3</option>
      </select>

      ​

      ​

    ​

    ​